<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>手把手教你使用 VuePress 搭建个人博客 | 阳光彩虹小白马</title>
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="icon" href="/images/icon.jpg">
    <link rel="manifest" href="/images/icon.jpg">
    <link rel="apple-touch-icon" href="/images/photo.jpg">
    <meta name="description" content="Personal Website">
    <meta http-quiv="pragma" cotent="no-cache">
    <meta http-quiv="pragma" cotent="no-cache,must-revalidate">
    <meta http-quiv="expires" cotent="0">
    <link rel="preload" href="/assets/css/0.styles.a1b29053.css" as="style"><link rel="preload" href="/assets/js/app.5d3d80a9.js" as="script"><link rel="preload" href="/assets/js/2.b8bab639.js" as="script"><link rel="preload" href="/assets/js/15.6395838e.js" as="script"><link rel="prefetch" href="/assets/js/10.f0caa0ef.js"><link rel="prefetch" href="/assets/js/11.74ad5213.js"><link rel="prefetch" href="/assets/js/12.df3552d8.js"><link rel="prefetch" href="/assets/js/13.325070e4.js"><link rel="prefetch" href="/assets/js/14.827ebd34.js"><link rel="prefetch" href="/assets/js/3.f7f6b6e3.js"><link rel="prefetch" href="/assets/js/4.e3ed48f8.js"><link rel="prefetch" href="/assets/js/5.1ae571cf.js"><link rel="prefetch" href="/assets/js/6.e6fdc0d1.js"><link rel="prefetch" href="/assets/js/7.8cc101a0.js"><link rel="prefetch" href="/assets/js/8.4ae5237e.js"><link rel="prefetch" href="/assets/js/9.c29293ee.js">
    <link rel="stylesheet" href="/assets/css/0.styles.a1b29053.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">阳光彩虹小白马</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/Java/" class="nav-link">
  Java
</a></div><div class="nav-item"><a href="/Idea/" class="nav-link">
  IntelliJ IDEA
</a></div><div class="nav-item"><a href="/Nginx/" class="nav-link">
  Nginx
</a></div><div class="nav-item"><a href="/Linux/" class="nav-link">
  Linux
</a></div><div class="nav-item"><a href="/Markdown/" class="nav-link">
  Markdown
</a></div><div class="nav-item"><a href="/Maven/" class="nav-link">
  Maven
</a></div><div class="nav-item"><a href="/Python/" class="nav-link">
  Python
</a></div><div class="nav-item"><a href="/JavaScript/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><a href="/Jenkins/" class="nav-link">
  Jenkins
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/Java/" class="nav-link">
  Java
</a></div><div class="nav-item"><a href="/Idea/" class="nav-link">
  IntelliJ IDEA
</a></div><div class="nav-item"><a href="/Nginx/" class="nav-link">
  Nginx
</a></div><div class="nav-item"><a href="/Linux/" class="nav-link">
  Linux
</a></div><div class="nav-item"><a href="/Markdown/" class="nav-link">
  Markdown
</a></div><div class="nav-item"><a href="/Maven/" class="nav-link">
  Maven
</a></div><div class="nav-item"><a href="/Python/" class="nav-link">
  Python
</a></div><div class="nav-item"><a href="/JavaScript/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><a href="/Jenkins/" class="nav-link">
  Jenkins
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>手把手教你使用 VuePress 搭建个人博客</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide.html#一、为什么你需要一个博客？" class="sidebar-link">一、为什么你需要一个博客？</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide.html#二、什么是-vuepress，为什么要使用-vuepress-？" class="sidebar-link">二、什么是 VuePress，为什么要使用 VuePress ？</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide.html#三、开始搭建" class="sidebar-link">三、开始搭建</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide.html#创建项目文件夹" class="sidebar-link">创建项目文件夹</a></li><li class="sidebar-sub-header"><a href="/guide.html#全局安装-vuepress" class="sidebar-link">全局安装 VuePress</a></li><li class="sidebar-sub-header"><a href="/guide.html#进入-vuepressblogdemo-文件夹，初始化项目" class="sidebar-link">进入 vuepressBlogDemo 文件夹，初始化项目</a></li><li class="sidebar-sub-header"><a href="/guide.html#创建文件夹和文件" class="sidebar-link">创建文件夹和文件</a></li><li class="sidebar-sub-header"><a href="/guide.html#在-config-js-文件中配置网站标题、描述、主题等信息" class="sidebar-link">在 config.js 文件中配置网站标题、描述、主题等信息</a></li><li class="sidebar-sub-header"><a href="/guide.html#在-package-json-文件里添加两个启动命令" class="sidebar-link">在 package.json 文件里添加两个启动命令</a></li><li class="sidebar-sub-header"><a href="/guide.html#一切就绪-跑起来看看吧" class="sidebar-link">一切就绪 🎉 跑起来看看吧</a></li></ul></li><li><a href="/guide.html#四、一些小亮点" class="sidebar-link">四、一些小亮点</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide.html#代码块高亮" class="sidebar-link">代码块高亮</a></li><li class="sidebar-sub-header"><a href="/guide.html#自定义容器" class="sidebar-link">自定义容器</a></li><li class="sidebar-sub-header"><a href="/guide.html#支持-emoji" class="sidebar-link">支持 Emoji</a></li><li class="sidebar-sub-header"><a href="/guide.html#支持-pwa" class="sidebar-link">支持 PWA</a></li></ul></li><li><a href="/guide.html#五、部署上线" class="sidebar-link">五、部署上线</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide.html#登陆-github" class="sidebar-link">登陆 Github</a></li><li class="sidebar-sub-header"><a href="/guide.html#新建仓库一：-username-github-io-（不用克隆到本地）" class="sidebar-link">新建仓库一： USERNAME.github.io （不用克隆到本地）</a></li><li class="sidebar-sub-header"><a href="/guide.html#新建仓库二：随便起一个名字，比如：vuepressblog-（克隆到本地）" class="sidebar-link">新建仓库二：随便起一个名字，比如：vuepressBlog （克隆到本地）</a></li><li class="sidebar-sub-header"><a href="/guide.html#修改仓库二中的-deploy-sh-发布脚本" class="sidebar-link">修改仓库二中的 deploy.sh 发布脚本</a></li><li class="sidebar-sub-header"><a href="/guide.html#在-package-json-文件夹中添加发布命令（使用工具包的请忽略）" class="sidebar-link">在 package.json 文件夹中添加发布命令（使用工具包的请忽略）</a></li><li class="sidebar-sub-header"><a href="/guide.html#大功告成，运行发布命令" class="sidebar-link">👏 大功告成，运行发布命令</a></li></ul></li><li><a href="/guide.html#六、发布到自己的个人域名" class="sidebar-link">六、发布到自己的个人域名</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide.html#购买域名" class="sidebar-link">购买域名</a></li><li class="sidebar-sub-header"><a href="/guide.html#修改仓库二中的-deploy-sh-文件" class="sidebar-link">修改仓库二中的 deploy.sh 文件</a></li><li class="sidebar-sub-header"><a href="/guide.html#大功告成，打开-https-www-zhangyunchen-cc-看一下吧" class="sidebar-link">👏 大功告成，打开 https://www.zhangyunchen.cc 看一下吧~~~</a></li></ul></li><li><a href="/guide.html#七、最后" class="sidebar-link">七、最后</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="手把手教你使用-vuepress-搭建个人博客"><a href="#手把手教你使用-vuepress-搭建个人博客" class="header-anchor">#</a> 手把手教你使用 VuePress 搭建个人博客</h1> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>有阅读障碍的同学，可以跳过第一至四节，下载我写好的<a href="https://github.com/zhangyunchencc/vuepress-devkit.git" target="_blank" rel="noopener noreferrer">工具包<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>:
<code>git clone https://github.com/zhangyunchencc/vuepress-devkit.git</code> 然后从第五节开始看。</p></div> <h2 id="一、为什么你需要一个博客？"><a href="#一、为什么你需要一个博客？" class="header-anchor">#</a> 一、为什么你需要一个博客？</h2> <p>优秀的程序员都在写博客，写博客有很多好处：</p> <ul><li>帮助自己梳理、总结、理解知识点（个人提升）</li> <li>帮助别人理解知识点（好人一生平安）</li> <li>简历更好看，更多面试机会（升职加薪）</li></ul> <h2 id="二、什么是-vuepress，为什么要使用-vuepress-？"><a href="#二、什么是-vuepress，为什么要使用-vuepress-？" class="header-anchor">#</a> 二、什么是 VuePress，为什么要使用 VuePress ？</h2> <p><strong>VuePress</strong> 是尤雨溪（vue.js 框架作者）4月12日发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 <a href="https://vuepress.docschina.org/" target="_blank" rel="noopener noreferrer">VuePress中文网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>其实类似的建站工具有很多，比如 WordPress、Jekyll、Hexo 等，其中 WordPress 需要自己购买虚拟主机，不考虑；Jekyll 是 Github-Page 默认支持的，听说操作比较复杂，没有用过不做过多评价了；Hexo 之前一直在用，但一直觉得主题不好看，风格不够简洁优雅。自从遇见 VuePress，嗯，就是它了~</p> <p>VuePress 有很多优点：</p> <ul><li>界面简洁优雅（个人感觉比 HEXO 好看）</li> <li>容易上手（半小时能搭好整个项目）</li> <li>更好的兼容、扩展 Markdown 语法</li> <li>响应式布局，PC端、手机端</li> <li>Google Analytics 集成</li> <li>支持 PWA</li></ul> <h2 id="三、开始搭建"><a href="#三、开始搭建" class="header-anchor">#</a> 三、开始搭建</h2> <h3 id="创建项目文件夹"><a href="#创建项目文件夹" class="header-anchor">#</a> 创建项目文件夹</h3> <p>可以右键手动新建，也可以使用 mkdir 命令新建：</p> <div class="language- extra-class"><pre><code>mkdir vuepressBlogDemo
</code></pre></div><h3 id="全局安装-vuepress"><a href="#全局安装-vuepress" class="header-anchor">#</a> 全局安装 VuePress</h3> <div class="language- extra-class"><pre><code>npm install -g vuepress
</code></pre></div><h3 id="进入-vuepressblogdemo-文件夹，初始化项目"><a href="#进入-vuepressblogdemo-文件夹，初始化项目" class="header-anchor">#</a> 进入 vuepressBlogDemo 文件夹，初始化项目</h3> <p>使用 <code>npm init</code> 或 <code>npm init -y</code>（默认yes）</p> <div class="language- extra-class"><pre><code>npm init -y
</code></pre></div><h3 id="创建文件夹和文件"><a href="#创建文件夹和文件" class="header-anchor">#</a> 创建文件夹和文件</h3> <p>在 vuepressBlogDemo 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：</p> <div class="language- extra-class"><pre><code>vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
</code></pre></div><h3 id="在-config-js-文件中配置网站标题、描述、主题等信息"><a href="#在-config-js-文件中配置网站标题、描述、主题等信息" class="header-anchor">#</a> 在 config.js 文件中配置网站标题、描述、主题等信息</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token string">'Chen\'s blog'</span><span class="token punctuation">,</span>
  description<span class="token operator">:</span> <span class="token string">'我的个人网站'</span><span class="token punctuation">,</span>
  head<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 注入到当前页面的 HTML &lt;head&gt; 中的标签</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span class="token operator">:</span> <span class="token string">'icon'</span><span class="token punctuation">,</span> href<span class="token operator">:</span> <span class="token string">'/logo.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 增加一个自定义的 favicon(网页标签的图标)</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  base<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token comment">// 这是部署到github相关的配置</span>
  markdown<span class="token operator">:</span> <span class="token punctuation">{</span>
    lineNumbers<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 代码块显示行号</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  themeConfig<span class="token operator">:</span> <span class="token punctuation">{</span>
    nav<span class="token operator">:</span><span class="token punctuation">[</span> <span class="token comment">// 导航栏配置</span>
      <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'前端基础'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/accumulate/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'算法题库'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'/algorithm/'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>text<span class="token operator">:</span> <span class="token string">'微博'</span><span class="token punctuation">,</span> link<span class="token operator">:</span> <span class="token string">'https://baidu.com'</span><span class="token punctuation">}</span>      
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    sidebar<span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> <span class="token comment">// 侧边栏配置</span>
    sidebarDepth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 侧边栏显示2级</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="在-package-json-文件里添加两个启动命令"><a href="#在-package-json-文件里添加两个启动命令" class="header-anchor">#</a> 在 package.json 文件里添加两个启动命令</h3> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="一切就绪-跑起来看看吧"><a href="#一切就绪-跑起来看看吧" class="header-anchor">#</a> 一切就绪 🎉 跑起来看看吧</h3> <div class="language- extra-class"><pre><code>npm run dev
</code></pre></div><h2 id="四、一些小亮点"><a href="#四、一些小亮点" class="header-anchor">#</a> 四、一些小亮点</h2> <p>完成了基础搭建后，就可以在docs目录下新建 <code>.md</code> 文件写文章了（.md 是 Markdown 语法文件，你需要知道 Markdown 的一些基本写法，很简单，这里给大家一份 <a href="https://www.jianshu.com/p/b03a8d7b1719" target="_blank" rel="noopener noreferrer">Markdown 语法整理大集合<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>）</p> <p>下面给大家安利一些实用的方法。</p> <h3 id="代码块高亮"><a href="#代码块高亮" class="header-anchor">#</a> 代码块高亮</h3> <p>在 .md 文件中书写代码时，可在 ``` 后增加 js、html、json等格式类型，代码块即可按照指定类型高亮</p> <p>代码：</p> <pre class="language-text"><code>``` js
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```</code></pre> <p>效果：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      msg<span class="token operator">:</span> <span class="token string">'Highlighted!'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="自定义容器"><a href="#自定义容器" class="header-anchor">#</a> 自定义容器</h3> <p>代码：</p> <div class="language- extra-class"><pre><code>::: tip 提示
this is a tip
:::

::: warning 注意
this is a tip
:::

::: danger 警告
this is a tip
:::
</code></pre></div><p>效果：</p> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>this is a tip</p></div> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>this is a tip</p></div> <div class="custom-block danger"><p class="custom-block-title">警告</p> <p>this is a tip</p></div> <h3 id="支持-emoji"><a href="#支持-emoji" class="header-anchor">#</a> 支持 Emoji</h3> <p>代码：</p> <div class="language- extra-class"><pre><code>:tada: :100: :bamboo: :gift_heart: :fire:
</code></pre></div><p>效果：
🎉 💯 🎍 💝 🔥</p> <p>👉 这里有一份 <a href="https://www.webpagefx.com/tools/emoji-cheat-sheet/" target="_blank" rel="noopener noreferrer">Emoji 大全<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h3 id="支持-pwa"><a href="#支持-pwa" class="header-anchor">#</a> 支持 PWA</h3> <p>VuePress 默认支持 <a href="https://segmentfault.com/a/1190000012353473" target="_blank" rel="noopener noreferrer">PWA<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，配置方法如下：</p> <p>config.js 文件中增加</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>head<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">// 注入到当前页面的 HTML &lt;head&gt; 中的标签</span>
  <span class="token punctuation">[</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span class="token operator">:</span> <span class="token string">'manifest'</span><span class="token punctuation">,</span> href<span class="token operator">:</span> <span class="token string">'/photo.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> rel<span class="token operator">:</span> <span class="token string">'apple-touch-icon'</span><span class="token punctuation">,</span> href<span class="token operator">:</span> <span class="token string">'/photo.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
serviceWorker<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否开启 PWA</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>public 文件夹下新建 manifest.json 文件，添加</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;short_name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;start_url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index.html&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;display&quot;</span><span class="token operator">:</span> <span class="token string">&quot;standalone&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;background_color&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#2196f3&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;张三的个人主页&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;theme_color&quot;</span><span class="token operator">:</span> <span class="token string">&quot;blue&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;icons&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;src&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./photo.jpg&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;sizes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;144x144&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;image/png&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;related_applications&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;platform&quot;</span><span class="token operator">:</span> <span class="token string">&quot;web&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;platform&quot;</span><span class="token operator">:</span> <span class="token string">&quot;play&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;https://play.google.com/store/apps/details?id=cheeaun.hackerweb&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p>最后在 iPhone 的 safrai 浏览器中打开本网站，点击 <code>+添加到主屏幕</code> 就能在桌面看到一个像原生 App 一样的图标（感觉自己写了一个 App 有木有 😄）</p> <h2 id="五、部署上线"><a href="#五、部署上线" class="header-anchor">#</a> 五、部署上线</h2> <p>说了这么多都是在本地进行的，现在我们要把本地的内容推送到某个服务器上，这样只要有网络，就可以随时随地看自己的网站了。</p> <p>一般来说，有两种方案可供选择：</p> <ol><li>自己买一个服务器，阿里云、腾讯云等，这种方式的好处是速度有保证、可以被搜索引擎收录，坏处是要花钱啊 💰 土豪同学可以考虑。</li> <li>使用 <a href="https://pages.github.com/" target="_blank" rel="noopener noreferrer">Github Pages<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 。什么是 Github Pages 呢？简单说就是 Github 提供的、用于搭建个人网站的静态站点托管服务。很多人用它搭建个人博客。这种方式的好处是免费、方便，坏处是速度可能会有些慢、不能被国内的搜索引擎收录。</li></ol> <p>最终我选择了方案2，下面将给大家讲解如何使用 Github Pages 服务。</p> <h3 id="登陆-github"><a href="#登陆-github" class="header-anchor">#</a> 登陆 <a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <p>打开 github 网站，登陆自己的 github 账号（没有账号的快去注册并面壁思过作为一个优秀的程序员为啥连一个github账号都没有）</p> <p>接着我们新建两个仓库：</p> <h3 id="新建仓库一：-username-github-io-（不用克隆到本地）"><a href="#新建仓库一：-username-github-io-（不用克隆到本地）" class="header-anchor">#</a> 新建仓库一： USERNAME.github.io （不用克隆到本地）</h3> <p><b>！！！注意：USERNAME 必须是你 Github 的账号名称，不是你的名字拼音，也不是你的非主流网名，不要瞎起，要保证和Github账号名一模一样！</b></p> <p>例如我的 Github 账号名称是 zhangyunchencc</p> <p><img src="/images/eg13.png" alt=""></p> <p>那么新建仓库，Repository name 就填写为：zhangyunchencc.github.io</p> <p><img src="/images/eg14.png" alt=""></p> <p><b>这个仓库建好后，不用克隆到本地，内容更新修改都在仓库二中进行。</b></p> <h3 id="新建仓库二：随便起一个名字，比如：vuepressblog-（克隆到本地）"><a href="#新建仓库二：随便起一个名字，比如：vuepressblog-（克隆到本地）" class="header-anchor">#</a> 新建仓库二：随便起一个名字，比如：vuepressBlog （克隆到本地）</h3> <p>这个项目是用来开发博客的，以后只需要改这个项目就够了。</p> <ul><li><p>使用工具包的，将 <a href="https://github.com/zhangyunchencc/vuepress-devkit.git" target="_blank" rel="noopener noreferrer">vuepress-devkit<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 中的内容拷贝到 vuepressBlog 文件夹中</p></li> <li><p>自己从头搭建的，将 vuepressBlogDemo 文件夹的内容拷贝到仓库二，并在根目录下创建 deploy.sh 文件，内容如下：</p></li></ul> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token shebang important">#!/usr/bin/env sh</span>

<span class="token comment"># 确保脚本抛出遇到的错误</span>
<span class="token builtin class-name">set</span> -e

<span class="token comment"># 生成静态文件</span>
<span class="token function">npm</span> run build

<span class="token comment"># 进入生成的文件夹</span>
<span class="token builtin class-name">cd</span> docs/.vuepress/dist

<span class="token comment"># 如果是发布到自定义域名</span>
<span class="token comment"># echo 'www.yourwebsite.com' &gt; CNAME</span>

<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> -A
<span class="token function">git</span> commit -m <span class="token string">'deploy'</span>

<span class="token comment"># 如果你想要部署到 https://USERNAME.github.io</span>
<span class="token function">git</span> push -f git@github.com:USERNAME/USERNAME.github.io.git master

<span class="token comment"># 如果发布到 https://USERNAME.github.io/&lt;REPO&gt;  REPO=github上的项目</span>
<span class="token comment"># git push -f git@github.com:USERNAME/&lt;REPO&gt;.git master:gh-pages</span>

<span class="token builtin class-name">cd</span> -
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="修改仓库二中的-deploy-sh-发布脚本"><a href="#修改仓库二中的-deploy-sh-发布脚本" class="header-anchor">#</a> 修改仓库二中的 deploy.sh 发布脚本</h3> <p>把文件中的 USERNAME 改成 Github 账号名，例如我的账号名是 zhangyunchencc，那么就可以改为：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token comment"># 如果你想要部署到 https://USERNAME.github.io</span>
<span class="token function">git</span> push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>这样仓库二和仓库一就建立了关联。</p> <p>简单说二者的关系是：仓库一负责显示网站内容，我们不需要改动它；日常开发和新增内容，都在仓库二中，并通过 npm run deploy 命令，将代码发布到仓库一。</p> <h3 id="在-package-json-文件夹中添加发布命令（使用工具包的请忽略）"><a href="#在-package-json-文件夹中添加发布命令（使用工具包的请忽略）" class="header-anchor">#</a> 在 package.json 文件夹中添加发布命令（使用工具包的请忽略）</h3> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token property">&quot;deploy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;bash deploy.sh&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="大功告成，运行发布命令"><a href="#大功告成，运行发布命令" class="header-anchor">#</a> 👏 大功告成，运行发布命令</h3> <div class="language- extra-class"><pre><code>npm run deploy
</code></pre></div><p>此时打开 Github Settings 中下面的链接: <a href="https://zhangyunchencc.github.io/" target="_blank" rel="noopener noreferrer">https://zhangyunchencc.github.io/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 即可看到自己的主页啦~</p> <p><img src="/images/eg2.png" alt=""></p> <h4 id="pc-端页面是这样的："><a href="#pc-端页面是这样的：" class="header-anchor">#</a> PC 端页面是这样的：</h4> <p><img src="/images/eg3.png" alt=""></p> <h4 id="手机端页面是这样的："><a href="#手机端页面是这样的：" class="header-anchor">#</a> 手机端页面是这样的：</h4> <p><img src="/images/eg4.png=200x" alt=""> <img src="/images/eg4.png" style="width:50%;display:block;margin:0 auto;"></p> <p>可以看到导航栏变成了左上角的小图标，可以打开和收起。</p> <h2 id="六、发布到自己的个人域名"><a href="#六、发布到自己的个人域名" class="header-anchor">#</a> 六、发布到自己的个人域名</h2> <p>如果你不满足于 https://zhangyunchencc.github.io/ 这样的域名，想要一个自己个人的专属域名，比如 http://www.zhangyunchen.cc/ ，毕竟一些大牛（阮一峰 <a href="http://www.ruanyifeng.com/blog/" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>） 都是自己名字的网址哦，很方便很酷呢 😎</p> <p>下面跟着步骤一步步来就好啦~</p> <h3 id="购买域名"><a href="#购买域名" class="header-anchor">#</a> 购买域名</h3> <p>推荐在 <a href="http://www.xinnet.com/domain/domain.html" target="_blank" rel="noopener noreferrer">新网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 或 <a href="https://wanwang.aliyun.com/" target="_blank" rel="noopener noreferrer">万网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 购买。</p> <p>我是在新网购买的，下面以新网为例，万网是类似的。</p> <p>购买完成后进入管理后台，点击 ”解析“ 按钮，添加下面两条内容：
<img src="/images/eg5.png" alt=""></p> <p><img src="/images/eg6.png" alt=""></p> <div class="custom-block warning"><p class="custom-block-title">注意！这里有坑：</p> <p>在 万网 购买域名的同学请注意，第二条记录中的 * 请用 @ 代替，万网不支持 *</p></div> <p>记录值里的 IP 可以通过 ping Github 的域名得到：</p> <div class="language- extra-class"><pre><code>ping www.username.github.io
</code></pre></div><h3 id="修改仓库二中的-deploy-sh-文件"><a href="#修改仓库二中的-deploy-sh-文件" class="header-anchor">#</a> 修改仓库二中的 deploy.sh 文件</h3> <p>将仓库二中的 deploy.sh 文件的第 13 行反注释掉，并填上自己的域名，deploy.sh 文件的最终版：</p> <div class="language-sh line-numbers-mode"><pre class="language-sh"><code><span class="token shebang important">#!/usr/bin/env sh</span>

<span class="token comment"># 确保脚本抛出遇到的错误</span>
<span class="token builtin class-name">set</span> -e

<span class="token comment"># 生成静态文件</span>
<span class="token function">npm</span> run build

<span class="token comment"># 进入生成的文件夹</span>
<span class="token builtin class-name">cd</span> docs/.vuepress/dist

<span class="token comment"># 如果是发布到自定义域名</span>
<span class="token builtin class-name">echo</span> <span class="token string">'www.zhangyunchen.cc'</span> <span class="token operator">&gt;</span> CNAME

<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> -A
<span class="token function">git</span> commit -m <span class="token string">'deploy'</span>

<span class="token comment"># 如果你想要部署到 https://&lt;USERNAME&gt;.github.io</span>
<span class="token function">git</span> push -f git@github.com:zhangyunchencc/zhangyunchencc.github.io.git master

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;  REPO=github上的项目</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/vuepress.git master:gh-pages</span>

<span class="token builtin class-name">cd</span> -

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>此时，我们运行 npm run deploy 即可发布到自己的专属域名啦~</p> <h3 id="大功告成，打开-https-www-zhangyunchen-cc-看一下吧"><a href="#大功告成，打开-https-www-zhangyunchen-cc-看一下吧" class="header-anchor">#</a> 👏 大功告成，打开 <a href="https://www.zhangyunchen.cc" target="_blank" rel="noopener noreferrer">https://www.zhangyunchen.cc<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 看一下吧~~~</h3> <p>拥有自己专属域名的个人博客感觉很酷哦~</p> <p>写一些文章，记录一点生活，把自己的网站发给同学朋友看看吧！ 😎</p> <h2 id="七、最后"><a href="#七、最后" class="header-anchor">#</a> 七、最后</h2> <ul><li>你需要一些 <a href="https://www.jianshu.com/p/b03a8d7b1719" target="_blank" rel="noopener noreferrer">Markdown<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 语法的基础知识；</li> <li>你需要一个 <a href="https://github.com/" target="_blank" rel="noopener noreferrer">Github<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 账号，并在里面创建两个 repo；</li> <li>Github 需要添加 ssh key，第一次使用的同学遇到问题可以百度解决；</li> <li>个人博客不只可以用来写技术相关的内容，也可以有自己写的文章、随笔，甚至上传一些照片。</li></ul> <p>我的 <a href="https://github.com/zhangyunchencc/vuepress-devkit.git" target="_blank" rel="noopener noreferrer">vuepress-devkit<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 已经开源放在了 Github 上，还有很多想要增加的功能，例如添加评论模块、自动生成侧边栏目录、增加网站分析工具等等，在这里欢迎大家 Star 或者 Fork 。</p> <p>以上，</p> <p>张韵晨 | Front End Engineer | 2018.10</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.5d3d80a9.js" defer></script><script src="/assets/js/2.b8bab639.js" defer></script><script src="/assets/js/15.6395838e.js" defer></script>
  </body>
</html>
